@charset "UTF-8";
html {
  font-size: 62.5%;
  font-family: "Microsoft yahei"; }

body, textarea, input, select, option {
  color: #333;
  font-family: "Hiragino Sans GB", "Microsoft Yahei", tahoma, arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; }

body, h1, h2, h3, h4, h5, h6, blockquote, ol, ul, dl, dd, p, textarea, input, select, option, form {
  margin: 0;
  padding: 0; }

ol, ul, textarea, input, option, th, td {
  padding: 0; }

.page {
  min-width: 320px;
  max-width: 750px;
  margin: 0 auto; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%; }

a, select, input, textarea {
  outline: none; }

article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  display: block; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

ul, ol {
  list-style-type: none; }

.hide {
  display: none; }

.show {
  display: block; }

.clearfix:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.clear {
  clear: both;
  height: 0;
  overflow: hidden; }

/* ios默认文本框阴影 */
input[type=text], textarea {
  -webkit-appearance: none; }

/* 低版本安卓文本框层级问题 */
input:focus {
  -webkit-user-modify: read-write-plaintext-only; }

fieldset, img {
  border: 0; }

a {
  text-decoration: none; }

a, textarea, input {
  outline: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

textarea {
  overflow: auto;
  resize: none; }

@media only screen and (min-width: 320px) {
  html {
    font-size: 75% !important;
    /* 12÷16=75% */ } }

/**
    62.5%   10px;
    640 150%    24px;
    320除以标准比例 640  再乘以 640的基数24  再除以  HTML 根据基数16
    320/640  * 24 / 16 = 75%;
    375/640  * 24 / 16 = 87.89%;
    414/640  * 24 / 16 = 97.03%
*/
@media only screen and (min-width: 360px) {
  html {
    font-size: 84.3% !important;
    /* 13.5÷16=84.3% */ } }

@media only screen and (min-width: 375px) {
  html {
    font-size: 87.89062% !important;
    /* 14.0625÷16=87.890625% */ } }

@media only screen and (min-width: 384px) {
  html {
    font-size: 90% !important;
    /* 14.4÷16=90% */ } }

@media only screen and (min-width: 390px) {
  html {
    font-size: 91.4% !important;
    /* 14.625÷16=91.4% */ } }

@media only screen and (min-width: 412px) {
  html {
    font-size: 96.56% !important;
    /* 15.45÷16=96.56% */ } }

@media only screen and (min-width: 414px) {
  html {
    font-size: 97.03% !important;
    /* 15.525÷16=97.03% */ } }

@media only screen and (min-width: 480px) {
  html {
    font-size: 112.5% !important;
    /* 18÷16=112.5% */ } }

@media only screen and (min-width: 560px) {
  html {
    font-size: 131.25% !important;
    /* 21÷16=131.25% */ } }

@media only screen and (min-width: 640px) {
  html {
    font-size: 150% !important;
    /* 24÷16=150% */ } }

@media only screen and (min-width: 720px) {
  html {
    font-size: 168.75% !important;
    /* 27÷16=168.75% */ } }

@media only screen and (min-width: 750px) {
  html {
    font-size: 175.78125% !important;
    /* 28.125÷16=175.78125% */ } }

.pull-load {
  position: relative;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; }

.pull-load-head {
  position: absolute;
  transform: translate3d(0px, -100%, 0px);
  width: 100%; }

.state-refreshing .pull-load-head,
.state-refreshed .pull-load-head {
  position: relative;
  transform: none; }

.pull-load-body {
  position: relative; }

.state-refreshing .pull-load-body {
  transition: transform 0.2s; }

.state-reset .pull-load-body {
  transition: transform 0.2s; }

/*
 * HeadNode default UI
 */
.pull-load-head-default {
  text-align: center;
  font-size: 12px;
  line-height: 3rem;
  color: #7676a1; }

.state-pulling .pull-load-head-default:after {
  content: '下拉刷新'; }

.state-pulling.enough .pull-load-head-default:after {
  content: '松开刷新'; }

.state-refreshing .pull-load-head-default:after {
  content: '正在刷新...'; }

.state-refreshed .pull-load-head-default:after {
  content: '刷新成功'; }

.state-pulling .pull-load-head-default {
  opacity: 1; }

.state-pulling .pull-load-head-default i {
  display: inline-block;
  font-size: 2em;
  margin-right: .6em;
  vertical-align: middle;
  height: 1em;
  border-left: 1px solid;
  position: relative;
  transition: transform .3s ease; }

.state-pulling .pull-load-head-default i:before,
.state-pulling .pull-load-head-default i:after {
  content: '';
  position: absolute;
  font-size: .5em;
  width: 1em;
  bottom: 0px;
  border-top: 1px solid; }

.state-pulling .pull-load-head-default i:before {
  right: 1px;
  transform: rotate(50deg);
  transform-origin: right; }

.state-pulling .pull-load-head-default i:after {
  left: 0px;
  transform: rotate(-50deg);
  transform-origin: left; }

.state-pulling.enough .pull-load-head-default i {
  transform: rotate(180deg); }

.state-refreshing .pull-load-head-default i {
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  font-size: 1.5rem;
  width: 1em;
  height: 1em;
  border: 2px solid #9494b6;
  border-top-color: #fff;
  border-radius: 100%;
  animation: circle .8s infinite linear; }

.state-refreshed .pull-load-head-default {
  opacity: 1;
  transition: opacity 1s; }

.state-refreshed .pull-load-head-default i {
  display: inline-block;
  box-sizing: content-box;
  vertical-align: middle;
  margin-right: 10px;
  font-size: 20px;
  height: 1em;
  width: 1em;
  border: 1px solid;
  border-radius: 100%;
  position: relative; }

.state-refreshed .pull-load-head-default i:before {
  content: '';
  position: absolute;
  top: 3px;
  left: 7px;
  height: 11px;
  width: 5px;
  border: solid;
  border-width: 0 1px 1px 0;
  transform: rotate(40deg); }

.pull-load-footer-default {
  text-align: center;
  font-size: 12px;
  line-height: 3rem;
  color: #7676a1; }

.state-loading .pull-load-footer-default:after {
  content: '加载更多'; }

.pull-load-footer-default.nomore:after {
  content: '没有更多'; }

.state-loading .pull-load-footer-default i {
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  font-size: 1.5rem;
  width: 1em;
  height: 1em;
  border: 2px solid #9494b6;
  border-top-color: #fff;
  border-radius: 100%;
  animation: circle .8s infinite linear; }

@keyframes circle {
  100% {
    transform: rotate(360deg); } }

.div1 {
  height: 8.33333rem;
  border: 1px solid red; }

.resume .empty {
  height: 100px;
  background: red;
  color: #fff;
  cursor: pointer;
  display: none; }

.resume .biaodan {
  border: 1px solid red;
  display: none; }

.resume .show_info {
  border: 1px solid blue;
  display: none; }

.resume._empty .empty {
  display: block; }

.resume._biaodan .biaodan {
  display: block; }

.resume._show_info .show_info {
  display: block; }

.mxbox {
  width: 500px;
  height: 500px;
  border: 1px solid red;
  display: flex;
  position: relative;
  margin: 0 auto; }
  .mxbox div {
    font-size: 14px; }
  .mxbox .mbox1 {
    color: #fff;
    width: 120px;
    background: red;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto; }
  .mxbox .mbox2 {
    color: #fff;
    width: 120px;
    margin: auto;
    background: red;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0 -60px; }
  .mxbox .mbox3 {
    color: #fff;
    width: 120px;
    margin: auto;
    background: red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); }
  .mxbox .mbox4 {
    color: #fff;
    width: 120px;
    margin: auto;
    background: red; }
